<script setup>
import { reactive,onMounted,ref,computed } from 'vue';
import BlogTop from '../components/BlogTop.vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const params = useRouter().currentRoute.value.params
// 登录
function toLogin(){
    router.push('/login')
}
// 若输入内容为空，则禁用
const hiveText = computed(() => detailsData.replyInfo === '')

const detailsData = reactive({
    titleId:0,
    articleInfo: "",
    replyInfo: "",
    logStatus:'',
    textData:'',
    placeholderInfo: "登录后才能发表评论丨支持 Markdown 语法", //回复提示信息
})
function mesgText(){
    alert(detailsData.replyInfo)
    detailsData.replyInfo = ''
}
// 是否允许回复
let isEditable = ref(false)
function findArticaleByTitleId(titleid){
    fetch(`/articleDetail.md`)
        .then((resp) => resp.text())
        .then((data) => (detailsData.articleInfo = data));
}
// 获取路由传递的id
onMounted(() => {
    // console.log(params.titleId);
    detailsData.titleId = params.titleId;
    findArticaleByTitleId(detailsData.titleId)
    // 获取登录状态
    detailsData.logStatus = window.sessionStorage.getItem("logStatus");
    if (detailsData.logStatus !== null) {
        isEditable.value = true;
        detailsData.placeholderInfo = "优质的评论，可以帮助作者获得更高的权重";
    }
})

</script>

<template>
    <div class="top">
    <!-- 导航栏 -->
    <BlogTop></BlogTop>
    </div>
    <div class="container">
        <div class="content">
            <div class="header">
            <h1>Spark核心数据集RDD</h1>
            <div class="user">
            <span> <el-icon><User /></el-icon>Hello欧 </span>
            <span> <el-icon><Clock /></el-icon>2023/1/2 </span>
            <span><el-icon><PriceTag /></el-icon>spark </span>
            </div>
            </div>
            <!-- MarkDown内容显示区 preview 纯预览模式 -->
            <v-md-editor
                v-model="detailsData.articleInfo"
                :mode="'preview'"   
            />
            <!-- 回复 -->
            <div class="reply">
                <p>评论</p>
                <el-divider></el-divider>
                <el-row>
                <el-col :span="3">
                    <img class="headImg" src="../assets/user.jpeg" />
                </el-col>
                <el-col :span="21">
                    <v-md-editor
                    v-model="detailsData.replyInfo"
                    :mode="'edit'"
                    right-toolbar=" "
                    left-toolbar="undo  clear image"
                    :placeholder="detailsData.placeholderInfo"
                    
                    :toolbars="{
                        bold: true, // 粗体
                        quote: true, // 引用
                        imagelink: true, // 图片链接
                        code: true, // code
                        alignleft: true, // 左对齐
                        aligncenter: true, // 居中
                        alignright: true, // 右对齐
                        preview: true, // 预览
                        
                    }"
                    />
                </el-col>
                </el-row>
                <div class="reply-btn">
                    <el-button
                        v-if="!isEditable"
                        type="success"
                        @click="toLogin()"
                    >
                        登录
                    </el-button>

                <el-button v-else type="primary" @click="mesgText" plain :disabled="hiveText">发表评论</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .container {
        width: 60%;
        margin: 0 auto;
        .content{
            padding: 6rem 0;
            .user {
                margin: 20px 0;
                color: #666;
                span {
                    margin-right: 15px;
                }
                .el-icon{
                    vertical-align: middle;
                }
            }
            .reply {
                margin-top: 80px;
                .v-note-wrapper {
                    min-height: 180px !important;
                }
                p {
                    font-weight: bold;
                    color: #409eff;
                    font-size: 20px;
                    position: relative;
                    top: 13px;
                }
            }
            .headImg {
                width: 100px;
                border-radius: 100px;
            }
            .reply-btn {
                margin-top: 15px;
                text-align: right;
            }
        }
    }
    
    
</style>